<template>
  <div id="app">
    <Add @addItem="addItem"></Add>
    <hr/>
    <List :arr="arr"></List>
    <hr/>
    <Footer></Footer>
  </div>
</template>

<script>
import Add from './components/Add.vue';
import List from './components/List.vue';
import Footer from './components/Footer.vue';

export default {
  name: 'App',
  data() {
    return {
      arr:["吃饭","睡觉","打豆豆"],
    };
  },
  mounted(){
    
  },
  components: {
    Add,
    List,
    Footer
  },
  methods:{
    addItem(msg){
      this.arr.push(msg);
    }
  },
  computed:{
    
  },
};
</script>

<style lang="scss" scoped>
  #app{
    width: 1500px;
    margin: 100px auto;
    border: 2px solid black;
  }
</style>
